<template>
  <div id="animation-heatmap" class="animation-heatmap"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  props:{
    parent_items:Array
  },
  data() {
    return {
      startAnimation:true,
      animationTimer:null,
      chart: null,
      visItem:'森林覆盖率',
      items: [],
      staItems: [
        "森林覆盖率",
        "林地面积",
        "森林面积",
        "人工林面积",
        "天然林面积",
        "活立木总蓄积",
        "人工林蓄积",
        "天然林蓄积",
        "乔木林单位面积蓄积量"
      ],
    };
  },
  watch:{
    parent_items(val){
      this.items = val
      this.initChart()
    }
  },
  mounted() {
    // dataApi.getData().then((res) => {
    //   this.items = res.data.items;
    //   this.initChart();
    // });
  },
  beforeDestroy(){
    clearInterval(this.animationTimer)
  },
  methods: {
    animation() {
      let that = this
      let index = 0;
      this.animationTimer = setInterval(()=>{
        let option = that.setChart(that)
        that.chart.setOption(option)
        index += 1
        if(index >= that.staItems.length){
          index = 0
        }
        that.visItem = that.staItems[index]
      },1500)
    },
    preData() {
      let res = [];
      for (let i = 0; i < this.items.length; i++) {
        res.push([
          this.items[i]["city"],
          this.items[i]["年份"],
          Number(this.items[i][this.visItem]) || "-",
        ]);
      }
      return res;
    },
    getMax(col) {
      let max = Number.MIN_VALUE;
      for (let i = 0; i < this.items.length; i++) {
        if (Number(this.items[i][col]) > max) {
          max = Number(this.items[i][col]);
        }
      }
      //console.log('最大  '  + max);
      return max;
    },
    getMin(col) {
      let min = Number.MAX_VALUE;
      for (let i = 0; i < this.items.length; i++) {
        if (Number(this.items[i][col]) < min) {
          min = Number(this.items[i][col]);
        }
      }
      //console.log('最小 ' + min);
      return min;
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("animation-heatmap"));
      let option = this.setChart(this);
      this.chart.setOption(option);
      this.animation()

      // 注册窗口变化回调函数
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })

      this.chart.on('click',()=>{
        //console.log('click');
        if(this.startAnimation){
          this.startAnimation = false
          clearInterval(this.animationTimer)
        }else{
          this.startAnimation = true
          this.animation()
        }
      })
    },
    setChart(that) {
      var cities = ["北京","天津","河北","山西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","重庆","四川","贵州","云南","西藏","陕西","甘肃","青海","宁夏","新疆",
      ];
      var years = ["2013", "2014", "2015", "2016", "2017", "2018"];

      var data = that.preData(that);

      let option = {
        backgroundColor: "#282a36",
        title: {
          text:  '各省市'+ that.visItem + "统计",
          left: "center",
          top: "0",
          textStyle: {
            color: "rgb(238, 197, 102)",
            fontSize: 14,
          },
        },
        tooltip: {
          position: "top",
        },
        animation: false,
        grid: {
          height: "50%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          name: "地区",
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: cities,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          name: "年",
          data: years,
          nameTextStyle: {
            fontSize: 16,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitArea: {
            show: true,
          },
        },
        dataZoom:[
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 100
        },
        ],
        visualMap: {
          min: that.getMin(that.visItem),
          max: that.getMax(that.visItem),
          calculable: false,
          bottom:'15%',
          textStyle: {
            color: "#fff",
          },
          orient: "horizontal",
          left: "0",
          align:'auto',
          text: ["高", "低"],
          inRange: {
            // color: ['#FF6666','#CC6633','#996633','#666633','#336633','#006633','#FFFF33','#CCFF33','#99FF33','#66FF33','#33FF33','#00FF33']
            color: ["orange", "yellow", "green"],
          },
        },
        series: [
          {
            name: that.visItem,
            type: "heatmap",
            data: data,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      return option;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
};
</script>

<style>
.animation-heatmap {
  width: 100%;
  height: calc(30vh);
}
</style>